<template>
  <!-- 
    stype: 表示样式
    :data 表示对应的数据（一般是数组） 
    :props 当数组的属性名不是 label / children 就要使用
    @node-click 每个节点点击时触发的事件
    show-checked 设置选框
    accordion 是手风琴 同一时刻只能展示一个
  -->
  <el-tree
    style="max-width: 600px"
    :data="data"
    :props="defaultProps"
    show-checkbox
    accordion
    @node-click="handleNodeClick"
  />
</template>

<script setup>

const handleNodeClick = (data) => {
  console.log(data)
}

const data = [
  {
    name: 'Level one 1',
    childs: [
      {
        name: 'Level two 1-1',
        childs: [
          {
            name: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    name: 'Level one 2',
    childs: [
      {
        name: 'Level two 2-1',
        childs: [
          {
            name: 'Level three 2-1-1',
          },
        ],
      },
      {
        name: 'Level two 2-2',
        childs: [
          {
            name: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    name: 'Level one 3',
    childs: [
      {
        name: 'Level two 3-1',
        childs: [
          {
            name: 'Level three 3-1-1',
          },
        ],
      },
      {
        name: 'Level two 3-2',
        childs: [
          {
            name: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const defaultProps = {
  children: 'childs',
  label: 'name',
}
</script>